<template>
<div>
  <el-dialog
    title="文章子栏目"
    :visible.sync="subVisible"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form ref="subForm" :model="subItem" label-width="100px" :rules="subRules">
      <el-form-item label="文章类型" >
        <el-select disabled v-model="subItem.dictType" placeholder="请选择文章类型">
          <el-option
            v-for="dict in noticeType"
            :key="dict.dictCode"
            :label="dict.dictLabel"
            :value="dict.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="子栏目名称" prop="itemLabel">
        <el-input v-model="subItem.itemLabel"></el-input>
      </el-form-item>
      <el-form-item label="子栏目码值" prop="itemValue">
        <el-input v-model="subItem.itemValue"></el-input>
      </el-form-item>
      <el-form-item label="子栏目排序" prop="itemSort">
        <el-input v-model="subItem.itemSort"></el-input>
      </el-form-item>
      <div class="text-right">
        <el-button type="success" @click="submitAddSubItem">提交</el-button>
      </div>
    </el-form>
  </el-dialog>

  <el-dialog
    title="维护文章子类"
    :visible.sync="dialogVisible"
    width="780px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="queryParams" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="文章类型" prop="noticeType">
            <el-select v-model="queryParams.dictType" placeholder="请选择文章类型">
              <el-option
                v-for="dict in noticeType"
                :key="dict.dictCode"
                :label="dict.dictLabel"
                :value="dict.dictCode"
              />
            </el-select>
            <el-button type="primary" class="ml20" @click="getSubItemByDType">查询</el-button>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>

    <template>
      <div class="txt-right mb10">
        <el-button
          type="success"
          size="small"
          @click.native="handleAddSubItem"
        >新增子类</el-button>
      </div>


      <el-table
        :data="tableData"
        :max-height="500"
        style="width: 100%">
        <el-table-column
          label="子栏目码值"
          prop="itemValue"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="itemLabel"
          label="子栏目名称"
          class="overflow-hidden"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="140">
          <template v-slot:default="{row}" >
            <el-button
              type="text"
              size="small"
              @click="handleEditSubItem(row)"
              style="margin-right: 5px">编辑</el-button>
            <el-popover
              placement="top"
              v-model="row.popoverVisible"
              trigger="click"
            >
              <p>确认要删除<{{row.itemLabel}}></p>
              <div style="text-align: right; margin: 0px">
                <el-button size="mini" type="text" @click="row.popoverVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="handleDelSubItem(row)">确定</el-button>
              </div>
              <template v-slot:reference>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-dialog>
</div>
</template>

<script>
import { getDicts } from '@/api/system/dict/data'
import { listDictItem, addDictItem, updateDictItem, deleteDictItem } from '@/api/system/dict/dict-item'


export default {
  name: "subType",
  created() {
    this.getDicts()
  },
  data() {
    return {
      subVisible: false,
      dialogVisible: false,
      subRules: {
        itemLabel: [
          {
            required: true,  // 设为必填
            message: '子项名称为必填项，请输入',  // 自定义报错文本
            trigger: 'blur'  // 触发时机：失去焦点时校验
          }
        ],
        itemValue: [
          {
            required: true,  // 设为必填
            message: '子项值为必填项，请输入',  // 自定义报错文本
            trigger: 'blur'  // 触发时机：失去焦点时校验
          }
        ]
      },
      queryParams: {
        // 基础筛选条件
        dictType: "",  // 指定字典类型
        itemLabel: "",        // 模糊查询标签
        status: "",              // 只查询正常状态的子项

        // 分页参数（RuoYi框架分页必传）
        pageNum: 1,
        pageSize: 100
      },
      subItem: {
        // 字典类型（必传，这里使用字典文章类型的dict_code，这是唯一生成的）
        dictType: "",

        // 子项排序（非必传，默认0）
        itemSort: 1,

        // 子项标签（必传，显示用的名称）
        itemLabel: "",

        // 子项值（必传，实际存储的键值）
        itemValue: "",

        // 父项值（非必传，多级子项时使用，顶级子项可留空或传""）
        parentValue: "",

        // 状态（非必传，默认0正常，1为停用）
        status: "0",

        // 备注（非必传，可选填说明信息）
        remark: ""
      },
      tableData: [],
      noticeType: [],
      formStatus: 'add'

    }
  },
  methods: {
    submitAddSubItem() {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          if (this.formStatus === 'add') {
            addDictItem(this.subItem).then(res => {
              if(res.code === 200) {
                this.$message.success('子项添加成功')
                this.listDictItem(this.queryParams)
                this.subVisible = false
              }
            })
          }
          if (this.formStatus === 'edit') {
            updateDictItem(this.subItem).then(res => {
              if(res.code === 200) {
                this.$message.success('子项修改成功')
                this.listDictItem(this.queryParams)
                this.subVisible = false
              }
            })
          }

        }
      })
    },
    getDicts() {
      return getDicts('sys_notice_type').then(response => {
        this.noticeType = response.data
      })
    },
    open() {
      this.dialogVisible = true
    },
    listDictItem(queryParams) {
      listDictItem(queryParams).then(res => {
        this.tableData = res.rows
      })
    },
    getSubItemByDType() {
      if (this.queryParams.dictType === '') {
        this.$message.info('请先选择文章类型')
      } else {
        this.listDictItem(this.queryParams)
      }

    },
    handleDelNoticeAttach(row) {
      this.$notify.info('代做')
    },
    handleAddSubItem() {
      this.formStatus = 'add'
      if (this.queryParams.dictType === '') {
        this.$notify.warning('请先选择文章类型')
      } else {
        this.$refs['subForm'] && this.$refs['subForm'].resetFields()
        this.subItem = {
          // 字典类型（必传，这里使用字典文章类型的dict_code，这是唯一生成的）
          dictType: "",

            // 子项排序（非必传，默认0）
            itemSort: 1,

            // 子项标签（必传，显示用的名称）
            itemLabel: "",

            // 子项值（必传，实际存储的键值）
            itemValue: "",

            // 父项值（非必传，多级子项时使用，顶级子项可留空或传""）
            parentValue: "",

            // 状态（非必传，默认0正常，1为停用）
            status: "0",

            // 备注（非必传，可选填说明信息）
            remark: ""
        }
        this.subItem.dictType = this.queryParams.dictType
        this.subVisible = true
      }
    },
    handleEditSubItem(row) {
      this.formStatus = 'edit'
      this.$refs['subForm'] && this.$refs['subForm'].resetFields()
      this.subItem = {
        ...row,
        dictType: parseInt(row.dictType)
      }
      this.subVisible = true
    },
    handleDelSubItem(row) {
      // todo: 删除时，需要先在后台检查是否有对应文章，如果有则不让删除
      deleteDictItem(row.itemId).then(res => {
        this.$message.success('子栏目删除成功')
        this.listDictItem(this.queryParams)
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
